<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>永不停止的风车</title>
<style type="text/css">
.pinwheel {
	width:140px;
	height:140px;	
	-webkit-transform-origin:69px 73px;            /* 指定风车扇叶变形的中心原点 */	
	-webkit-animation-name:keyname;                /* 绑定关键帧动画 */	
	-webkit-animation-duration:2s;                 /* 动画播放周期2s */	
	-webkit-animation-iteration-count:infinite;    /* 动画无限制循环 */	
	-webkit-animation-timing-function:linear;	   /* 线性的变化速度 */	
}
.pinwheel span{
	width:100px;
	height:50px;
	display:block;
	opacity:0.6;
	position:relative;
	border-radius:25px;
}
.pinwheel .one{
	background-color:#f00;
	-webkit-transform:skew(30deg);
	top:48px;
	left:38px;
}
.pinwheel .tow{
	background-color:#00f;
	-webkit-transform: rotate(120deg) skew(30deg);
	top:18px;
	left:5px;
}
.pinwheel .three{
	background-color:#060;
	-webkit-transform: rotate(240deg) skew(30deg);
	top:-72px;
	left:5px;
}
.pinwheel .point{
	position:relative;
	top:-90px;
	left:45px;
}
.tree{
	position:relative;
	top:-78px;
	left:65px;
	border-radius:10px 10px 0 0;
	height:200px;
	width:10px;
	background-color:#999;
	background:-webkit-gradient(linear, left top, right top, from(#ffcc00), to(#cc0033));
	z-index:-1;
}
.tree img{
	width:10px;
}
 @-webkit-keyframes keyname {    /*  关键帧动画keyname */
 from {
 	-webkit-transform:rotate(0);
}
to {
	-webkit-transform:rotate(360deg);     /* 旋转风车360deg */
}
}
</style> 
</head>
<body>
<!--风车扇叶-->
<div class="pinwheel"> <span class="one"></span><span class="tow"></span><span class="three"></span></div>
<!--风车杆-->
<div class="tree"><img src="images/point.png" /></div>
</body>
</html>